/**重置标签默认样式*/
#container {
	width: 100%;
	height: 100%;
	/*background: #eee;*/
	position: relative;
	box-shadow: 20px 20px 55px #777;
}

.header {
	/*background: #000;*/
	height: 40px;
	color: #fff;
	line-height: 34px;
	padding: 0 10px;
}

.score-block {
	position: fixed;
	bottom: -9.2rem;
	width: 100%;
	height: 9.2rem;
	background: url('../img/top-bg.png') no-repeat;
	z-index: 5000;
	background-size: cover;
	transition: bottom .2s ease-in-out;
}

.score-block .star-list {
	display: flex;display: -webkit-flex;
	justify-content: center;-webkit-justify-content: center;
	margin: 1.2rem 0;
}

.score-block .star-list .star {
	width: 1.2rem;
	height: 1.06rem;
	background: url("../img/icon-score.png") no-repeat 100% center;
	background-size: 100%;
	margin: .47rem;
}

.score-block .star-list .star.active {
	background-image: url("../img/icon-score-active.png");
	background-size: 100%;
}

.score-block .star-list .submit-btn {
	width: 5rem;
	height: 1.94rem;
	border-radius: .97rem;
	background-color: #04BE02;
	border: none;
	color: #fff;
	font-size: .82rem;
	margin-left: 1rem;
}

.score-block .remind {
	max-width: 18rem;
	font-size: .82rem;
	color: #fff;
	margin: 0 auto;
}

.header-input-block {
	position: absolute;
	bottom: -7.5rem;
	width: 100%;
    min-width:320px;
    max-width:640px;
	min-height: 3rem;
	/*background-color: #fff2f2;*/
	/*padding: .94rem;*/
	display: flex;display: -webkit-flex;
	align-items: center;-webkit-align-items: center;
	flex-wrap: wrap;-webkit-flex-wrap: wrap;
	z-index: 999;
	border-top: 1px solid #fff;
	background-color: #fff;
	transition: bottom .2s ease-in-out;
}

.header-input-block .function {
	height: 7.5rem;
	width: 100%;
	border-top: 1px solid #E0E0E0;
	display: flex;
}

.header-input-block .function .func-item {
	flex: 1;
	min-width: 33.33%;
	display: flex;display: -webkit-flex;
	align-items: center;-webkit-align-items: center;
	justify-content: center;-webkit-justify-content: center;
	flex-direction: column;-webkit-flex-direction: column;
}

.header-input-block .function .func-item > div {
	width: 3.75rem;
	height: 3.75rem;
	border: 1px solid #E0E0E0;
	border-radius: .625rem;
	display: flex;display: -webkit-flex;
	align-items: center;-webkit-align-items: center;
	justify-content: center;-webkit-justify-content: center;
}

.header-input-block .function .func-item > div img {
	width: 2.3rem;
	height: 2.3rem;
}

.header-input-block .function .func-item > span {
	color: #999;
	margin: .28rem;
}

.header-input-block.show-func {
	bottom: 0!important;
}

.header-input-block input {
	height: 2.2rem;
	flex: 1;
	/*border-radius: .6rem 0 0 .6rem;*/
	border: none;
	line-height: 1.5;
	/*padding: .4rem .3rem;*/
	margin: .4rem;
	font-size: .90rem;
	text-indent: .3rem;
	border-bottom: 1px solid #dcdcdc;
	background-color: inherit;
}

.header-input-block .message-length {
	position: absolute;
	right: 1.8rem;
	bottom: .8rem;
	margin-right: 5rem;
	font-size: .85rem;
	color: #aaa;
}

.header-input-block .more-func {
	width: 3rem;
	height: 2rem;
	background: url("../img/icon-more-func.png") no-repeat center;
	background-size: auto 100%;
}

.header-input-block > span {
	display: inline-block;
	width: 4rem;
	height: 2rem;
	background-color: #33E692;
	cursor: pointer;
	text-align: center;
	border-radius: .4rem;
	line-height: 2.2rem;
	color: #fff;
	font-size: 1rem;
	margin: .4rem;
}

.header-input-block span:hover {
	color: #fff;
	/*background: #999;*/
}

#user_face_icon {
	display: inline-block;
	background: red;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 1.2rem;
	position: absolute;
	bottom: 6px;
	left: .56rem;
	cursor: pointer;
	overflow: hidden;
}

img {
	width: 2.5rem;
	height: 2.5rem;
}

.wrapper {
	position: absolute;
	top: 0;
	bottom: 5rem;
	width: 100%;
	padding: 0 .94rem;
}

.content {
	width: 100%;
}

.content li {
	/*margin-top: .4rem;*/
	/*padding-left: .4rem;*/
	width: 100%;
	display: block;
	clear: both;
	overflow: hidden;
	margin-bottom: 1rem;
}

.content .send-time {
	width: 4rem;
	height: .88rem;
	background-color: #F5C1BB;
	color: #fff;
	margin: 0 auto;
	font-size: .62rem;
	border-radius: .44rem;
	display: flex;display: -webkit-flex;
	align-items: center;-webkit-align-items: center;
	justify-content: center;-webkit-justify-content: center;
}

.content li img {
	float: left;
	width: 3.46rem;
	height: 3.46rem;
	border-radius: 50%;
	margin-top: .68rem;
}

.content li span {
	position: relative;
	padding: .68rem;
	float: left;
	margin: 1.06rem .75rem 0 .75rem;
	min-width: 4rem;
	max-width: 63%;
	/*border: 1px solid #d3d3d3;*/
	color: #373737;
	min-height: 2.8rem;
	font-size: .88rem;
	display: flex;display: -webkit-flex;
	align-items: center;-webkit-align-items: center;
}

/*.content li span div {
	position: absolute;
	width: 10px;
	height:10px;
	border-width: 10px 10px 10px 10px;
	border-style: solid;
}*/

.content li .spanleft {
	background-color: #fff;
	border-radius: 0 1.4rem 1.4rem 1.4rem;
}

/*.content li .spanleft div:nth-child(1) {*/
	/*left: -21px;*/
	/*width: 11px;*/
	/*border-color:transparent #ddd transparent transparent;*/
/*}*/

/*.content li .spanright div:nth-child(1) {*/
	/*right: -21px;*/
	/*width: 11px;*/
	/*border-color:transparent transparent transparent #d3d3d3;*/
/*}*/

/*.content li .spanleft div:nth-child(2) {*/
	/*left: -19px;*/
	/*border-color:transparent #fff transparent transparent;*/
/*}*/

/*.content li .spanright div:nth-child(2) {*/
	/*right: -19px;*/
	/*border-color:transparent transparent transparent #9FE658;*/
/*}*/

.content li img.imgleft {
	float: left;
}

.content li img.imgright {
	float: right;
}

.content li span.spanleft {
	float: left;
	background-color: #fff;
}

.content li span.spanright {
	float: right;
	background-color: #ff6655;
	color: #fff;
	border-radius: 1.4rem 0 1.4rem 1.4rem;
}

.message-remind {
	max-width: 80%;
	background-color: #F5C1BB;
	color: #fff;
	margin: .4rem auto;
	font-size: .8rem;
	border-radius: .3rem;
	padding: .5rem;
}

.evolution-btn {
	position: fixed;
	top: 6rem;
	left: 5px;
}